<template>
  <view class="pm-todo-bg"></view>
  <view class="pm-todo app-container flex flex-column">
    <view class="sys-name flex-shrink-0">华信项目管理系统</view>
    <view class="pm-home-search flex-shrink-0">
      <d-input v-model="processName" placeholder="请输入要搜索的流程名称">
        <template #prefix>
          <image class="icon-search" :src="SearchPng"></image>
        </template>
        <template #suffix>
          <view @click="handleSelect">
            <text class="search-split">|</text>
            <text class="search-text">搜索</text>
          </view>
        </template>
      </d-input>
    </view>
    <view class="flex-grow-1 pm-todo__main">
      <d-card>
        <view style="height: 100%" class="flex flex-column">
          <view class="tabs-box flex flex-row flex-shrink-0">
            <view
              v-for="item in tabList"
              :key="item.value"
              @click="setActiveTab(item.value)"
              :class="[
              'todo-tab flex flex-row flex-shrink-0 align-center',
              {'is-active': activeTab === item.value}
            ]"
            >
              <view class="tab-label">{{ item.label }}</view>
              <view class="tab-count" v-if="item.count">{{ item.count }}</view>
            </view>
          </view>
          <view class="tabs__body flex-grow-1">
            <swiper class="swiper-box" @change="handlerSwiperChange" :current="swiperDotIndex">
              <swiper-item>
                <pm-process-todo ref="processTodoRef" :process-name="processName"></pm-process-todo>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </d-card>
    </view>
  </view>
</template>

<script setup lang="ts">
import PmProcessTodo from "./views/processTodo/index.vue";
import SearchPng from '@/static/images/oa/search.svg'

defineOptions({ name: 'PmHomeTodo' })

const inputVal = ref<string>();

function setActiveTab(val: number) {
  activeTab.value = val
  swiperDotIndex.value = val
}
const activeTab = ref<number>(0);
const tabList = ref<Array<Record<string, any>>>([
  {label: '流程待办', value: 0},
  // {label: '事项待办', value: 1},
])

const swiperDotIndex = ref<number>(0)
function handlerSwiperChange(e: any) {
  activeTab.value = e.detail.current
}

const processTodoRef = ref();
const processName = ref<string>(null);
function handleSelect() {
  if (processTodoRef.value) {
    processTodoRef.value.handleSelect();
  }
}
</script>

<style scoped lang="scss">
@import 'src/styles/bg/todoBg';

.pm-todo-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-image: $--oa-todo-bg;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: top center;
}

:deep(.uni-input-placeholder.input-placeholder) {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.5);
}

:deep(.uni-input-input) {
  color: #fff;
  font-size: 32rpx;
}

.pm-todo {
  position: relative;
  z-index: 9;

  .pm-todo__main {
    margin-top: 32rpx;

    .pm-todo-card {
      height: 100%;
    }
  }

  .sys-name {
    font-size: 36rpx;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;
    color: #FFFFFF;
    text-align: center;
  }

  .pm-home-search {
    max-width: 568rpx;
    margin: 24rpx auto 0;

    .icon-search {
      width: 48rpx;
      height: 48rpx;
      margin-right: 18rpx;
    }

    .search-split {
      margin: 0 24rpx;
      color: rgba(255, 255, 255, 0.2);
    }

    .search-text {
      font-size: 32rpx;
      color: #FFFFFF;

    }
  }
}

.tabs-box {
  .todo-tab.is-active {
    .tab-label {
      color: #333333;
      font-size: 36rpx;
      font-weight: bold;

      &::before {
        content: '';
        width: 48rpx;
        height: 8rpx;
        background-color: #333333;
        position: absolute;
        bottom: 0;
        left: calc(50% - 24rpx);
      }
    }
  }

  .todo-tab {
    margin-right: 20rpx;

    .tab-label {
      @include text-overflow(1);
      font-size: 28rpx;
      color: #999999;
      position: relative;
      padding: 20rpx 0;
    }

    .tab-count {
      margin-left: 8rpx;
      height: 36rpx;
      border-radius: 18rpx;
      background: #C80909;
      color: #fff;
      line-height: 36rpx;
      text-align: center;
      padding: 0 10rpx;
      font-size: 24rpx;
    }
  }

  .tabs__body {
    .swiper-box {
      height: 100%;
    }
  }
}
</style>
